<template>
    <div class="search-wrap">
        <div class="search-body">
            <input class="search-input" type="text" placeholder="输入内容" v-model="text" @keyup.enter="searchTap()"/>
        </div>
    </div>
</template>

<script setup>
    import {ref, unref} from "vue"
    import {openNewTab} from "/src/utils"

    let text = ref("")

    const searchTap = () => {
        let url = `https://cn.bing.com/search?q=${text.value}`
        console.log('url', url)
        openNewTab(url)
        text.value = ''
    }

</script>

<style lang="less" scoped>
    @width: 500px;
    @height: 40px;
    @radius: @height;
    @padding: 20px;
    @fontSize: 15px;
    @borderWidth: 1px;

    .search-wrap {
        .search-body {
            height: @height;
            width: @width;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;

            @inputHeight: @height - @borderWidth * 2;

            .search-input {
                font-size: @fontSize;
                height: @inputHeight;
                line-height: @inputHeight;
                border: 1px solid #222;
                width: @width - @padding * 2;
                border-radius: @radius;
                padding: 0 60px 0 @padding;

                &:focus {
                    outline: none;
                    border: 1px solid #000000;
                }
            }

            &::after {
                content: "Enter";
                position: absolute;
                right: 10px;
                color: #222;
            }
        }
    }
</style>